<template>
  <div class="relative inline" :style="{width: width, height: height}">
    <div v-if="$Browser().trident"  :style="{width: width, height: height}">
      <div v-if="instantOcx">
        <a :href="`${this.$site.libServer}/OCX-OpenAPI.exe`" class="ocxDownload">点击此处下载视频插件</a>
      </div>
      <object classid="clsid:9ECD2A40-1222-432E-A4D4-154C7CAB9DE3" width="100%"  ref="mpv" id="mpv" :style="{height: `${contentHeight-28}px`}">
        <param name="wmode" value="opaque">
      </object>
    </div>
    <div v-else class="video-no"></div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import mixin from './mixin'
  export default {
    name: 'zz-mulvideo',
    mixins: [mixin],
    data () {
      return {
        project_name: '碧桂园森林城市',
        region_name: '东莞区域',
        monitor_name: '1号监控 | 围墙',
        instantOcx: true
      }
    },
    computed: {
      ...mapGetters({
        video: 'getVideo'
      })
    },
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      deviceVideoList: {
        type: Array,
        default: function () {
          return []
        }
      },
      screen_option: 9,
      projectNameArray: {
        type: Array,
        default: function () {
          return []
        }
      },
      projectNameObject: {
        type: String,
        default: ''
      }
    },
    watch: {
      deviceVideoList (items, oldItems) {
        if (oldItems && oldItems[0] && oldItems[0].cameraUuid === items[0].cameraUuid) {
          let oldItemsLength = oldItems.length - 1
          let itemsLength = items.length - 1
          if (oldItems[oldItemsLength].cameraUuid === items[itemsLength].cameraUuid) {
            return
          }
        }
        this.initPreview(items)
      }
    },
    mounted () {
      window.SPJKVIDEO = this
    },
    methods: {
      // 1.初始化视频插件，1是中文，2是英文
      InitMpvx () {
        let ocxObj = this.$refs.mpv
        let languageType = 1
        let ret = ocxObj.MPV_Init(languageType)
        if (ret !== 0) {
          // this.$message.warning('多路预览初始化失败')
        } else {
          this.instantOcx = false
          this.SetLocalParam()
        }
      },
      // 2.设置预览窗口大小，抓图、录像参数
      SetLocalParam () {
        let ocxObj = this.$refs.mpv
        let height = this.$refs.mpv.offsetHeight
        let width = this.$refs.mpv.offsetWidth
        let xml = '<?xml version="1.0" encoding="UTF-8"?> ' +
          '<localParam> ' +
          '<width>' + width + '</width> ' +
          '<height>' + height + '</height> ' +
          '<picType>1</picType> ' +
          '<capturePath>C:Hikvision</capturePath> ' +
          '<recordSize>2</recordSize> ' +
          '<recordPath>C:Hikvision</recordPath> ' +
          '<limitPreviewTime> 0 </limitPreviewTime> ' +
          '</localParam>'
        let ret = ocxObj.MPV_SetLocalParam(xml)
        if (ret !== 0) {
          // this.$message.warning('单路预览设置本地参数失败')
        } else {
          this.SetWnd()
          this.SPV_SetToolBar()
          this.ShowMainToolBar()
          this.SetWnd()
          this.$emit('initSuccess')
        }
      },
      async initPreview (items) {
        this.$refs.mpv.MPV_StopAllPreview()
        const loadData = camera => new Promise(resolve => {
          const data = {
            'videoUuid': camera.cameraUuid
          }
          this.$axios({
            method: 'post',
            closeLoading: true,
            closeSaveRequest: true,
            url: `${this.$site.videoServer}/api/hikvision8700/getPreviewParam`,
            data: this.$qs.stringify(data)
          }).then(res => {
            resolve(res.data.data.previewParam)
          })
        })
        for (let i = 0; i < items.length; i++) {
          let data = await loadData(items[i])
          data = data.replace(':MAIN:', ':SUB:')
          this.StartPreview(data)
        }
      },
      // 预览xml视频流
      StartPreview (xml) {
        let ocxObj = this.$refs.mpv
        var ret = ocxObj.MPV_StartPreview(xml)
        if (ret !== 0) {
          // this.$message.error('多路预览失败')
        } else {
        }
      },
      // 设置工具条按钮接口
      SPV_SetToolBar (id) {
        let ocxObj = this.$refs.mpv
        let ret = ocxObj.MPV_SetToolBar(id)
        if (ret !== 0) {
          alert('设置工具条失败！')
        }
      },
      // 设置文字
      SetOSD (cameraId, projectName, departmentName) {
        let ocxObj = this.$refs.mpv
        let xml = '<?xml version="1.0" encoding="UTF-8"?> ' +
          '<textInfo> ' +
          '<text>' + projectName + '(' + departmentName + ')' + '</text> ' +
          '<cameraUuid>' + cameraId + '</cameraUuid> ' +
          '<location>' + 3 + '</location> ' +
          '<fontSize>' + 20 + '</fontSize> ' +
          '<RGB>' + '0xf2f2f2' + '</RGB> ' +
          '</textInfo>'
        let ret = ocxObj.MPV_SetOSDText(xml)
        if (ret !== 0) {
          // alert('字符叠加失败！')
        } else {
          // alert('成功')
        }
      },
      // 设置主工具栏显示/隐藏接口
      ShowMainToolBar () {
        let ocxObj = this.$refs.mpv
        let ret = ocxObj.MPV_ShowMainToolBar(0)
        if (ret !== 0) {
          // alert('显示主工具栏失败')
        }
      },
      // 设置分屏数接口
      SetWnd () {
        let ocxObj = this.$refs.mpv
        let ret = ocxObj.MPV_SetPlayWndCount(parseInt(this.video.windsNum, 10))
        if (ret !== 0) {
          alert('设置分屏失败！')
        }
      },
      UninitMpvx () {
        var ocxObj = this.$refs.mpv
        var ret = ocxObj.MPV_Uninit()
        if (ret !== 0) {
          // this.$message.error('反初始化失败')
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .header_title {
    width: 180px;
    background-color: rgba(0,0,0,.1);
    text-align: center;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    height: 35px;
    line-height: 35px;
    color: #f2f2f2;
  }
  .footer_introduce {
    padding: 0 20px;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: rgba(0,0,0,.3);
    position: absolute;
    left: 0px;
    bottom: 0px;
    box-sizing: border-box;
    .left_intro {
      p{
        padding-left: 10px;
        color: #00e8ff;
      }
    }
    .right_intro {
      p {
        color: #f2f2f2;
      }
    }
  }
  .video-no{
    color: #fff;
    text-align: center;
  }
  .ocxDownload {
    &:hover{
      color: red;
      text-decoration: underline;
    }
  }
</style>
